<style lang="less">
.card_style {
  height: 100%;
  width: 100%;
  overflow: hidden;
  .ivu-card-body {
    padding: 0px;
  }
}
.page_style {
  margin-top: 10px;
  text-align: center;
}
.bench_search {
  margin-bottom: 10px;
}
.nopadding .ivu-table-cell {
  padding: 0px 0px;
}
.item1{
  height: 42px;
  line-height: 40px;
}
.marginR2 {
  margin-right: 2%;
}
.fontsize20 {
  font-size: 20px;
}
.fontTitle {
  font-size: 20px;
  height: 52px;
  text-align: right;
  padding-top: 16px;
  // vertical-align: bottom;
}
.fontContent {
  font-size: 20px;
  height: 52px;
  text-align: left;
  padding-top: 16px;
  color: #dc9387;
  // vertical-align: bottom;
}
.countNum {
  font-size: 35px;
  color: #dc9387;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
.new-btn-sty1 {
  margin-right: 5px;
  color: #fff;
  background-color: #598ED1;
  border-color: #598ED1;
  font-weight: 500;
}
.text-overflow{
  width:300px; /* 超过宽度就显示... */
  text-overflow: ellipsis; /* 显示... */
  overflow: hidden; /* 隐藏文字 */
  white-space: nowrap; /* 不换行 */
  cursor: pointer; /* hover显示手形 */
}
</style>
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <div>
      <Row class="search-info-style">
        <Col span="6">
          <span style="">申请人：</span>
          <Input style="width: 70%;" v-model="searchInfo.name" />
        </Col>
        <Col span="6">
          <span>业务编号：</span>
          <Input style="width: 70%;" v-model="searchInfo.code" />
        </Col>
        <Col span="6">
          <span>时间范围：</span>
          <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer="" style="width: 70%"
                      placement="bottom-end" v-model="searchInfo.applytime"></DatePicker>
        </Col>
        <Button class="new-btn-sty" @click="searchDatawork">
          <Icon type="ios-clock-outline" /> 刷新
        </Button>
        <Button class="new-btn-sty" @click="searchDatawork">
          <Icon type="ios-search" /> 搜索
        </Button>
      </Row>
      <Row>
        <Col span="21" offset="1">
          <Table  :columns="columnswork" :data="datalistwork" style="margin-top:10px"></Table>
          <Row v-if="searchInfo.loading1 == true">
            <Col class="demo-spin-col" span="8" offset="8">
              <Spin fix>
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>数据正在加载</div>
              </Spin>
            </Col>
          </Row>
        </Col>
      </Row>
        <Page :total="searchInfo.totalnum" class="page_style" :current="searchInfo.currentPageNo"
              :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total show-elevator show-sizer @on-page-size-change="changePagesize"/>
    </div>
    <!--ems模态框-->
    <Modal v-model="emsmodal.show" title="邮寄绑定" width="700px" @on-ok="createOrderEMS" >
      <div style="background-color:#F8F8FF;line-height: 3.5;position:relative;width: 100%;height: 250px;font-size: 12px; color: #515a6e;" class="notice-content">
        <Row style="font-size: 16px">
          <Col span="3" offset="1">
            事项名称:
          </Col>
          <Col span="9">
            {{emsinfo.title}}
          </Col>
        </Row>
        <Row style="font-size: 15px;">
          <Col span="3" offset="1">
            业务编号:
          </Col>
          <Col span="5" align="center">
            <Input v-model="emsinfo.code" disabled="disabled"></Input>
          </Col>
        </Row>
        <Row>
          <Col span="3" align="right" offset="2">
            申请人:
          </Col>
          <Col span="5" align="center" push="1">
            <Input v-model="emsinfo.name" disabled="disabled"></Input>
          </Col>
          <Row>
            <Col span="3" align="right" offset="1">
              手机号:
            </Col>
            <Col span="5" align="center" push="1">
              <Input v-model="emsinfo.mobile_encryption" disabled="disabled"></Input>
            </Col>
          </Row>
        </Row>
        <Row>
          <Col span="3" align="right" offset="2">
            身份证:
          </Col>
          <Col span="5" align="center" push="1">
            <Input v-model="emsinfo.cardno_encryption" disabled="disabled"></Input>
          </Col>
          <Row>
            <Col span="3" align="right" offset="1">
              状态:
            </Col>
            <Col span="5" align="center" push="1">
              <Input v-model="emsinfo.process_name" disabled="disabled"></Input>
            </Col>
          </Row>
        </Row>
        <Row>
          <Col span="3" align="right" offset="2">
            申请时间:
          </Col>
          <Col span="5" align="center" push="1">
            <Input v-model="emsinfo.create_time" disabled="disabled"></Input>
          </Col>
          <Row>
            <Col span="3" align="right" offset="1">
              ems单号:
            </Col>
            <Col span="5" align="center" push="1">
              <Input v-model="emsinfo.ems_number"></Input>
            </Col>
          </Row>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script>
import { createOrderEMS, date2str, getOrdeEMS, getOrderEMSList } from '@/api/eventlist'
export default {
  data () {
    return {
      datalistwork: [],
      searchInfo: {
        currentPageNo: 1,
        currentPageSize: 10,
        level1: 0,
        level2: 0,
        level3: 0,
        loading1: true,
        applytime: []
      },
      emsmodal: {
        show: false
      },
      emsinfo: {
        ems_number: []
      },
      mailList: [[], [], []],
      columnswork: [
        { title: '事项名称', key: 'title', minWidth: 190, align: 'center' },
        { title: '业务编号',
          key: 'code',
          width: 150,
          align: 'center'
        },
        { title: '申请人', key: 'name', width: 100, align: 'center' },
        { title: '手机号', key: 'mobile_encryption', width: 130, align: 'center' },
        { title: '身份证', key: 'cardno_encryption', width: 160, align: 'center' },
        { title: '状态', key: 'process_name', width: 85, align: 'center' },
        { title: '邮寄状态', key: 'ems_state', width: 85, align: 'center' },
        { title: '申请时间', key: 'create_time', width: 180, align: 'center', sortable: true },
        { title: '操作',
          key: 'action',
          minWidth: 186,
          align: 'center',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.emsmodal.show = true
                    let param = {
                      order_code: params.row.code
                    }
                    getOrdeEMS(param).then(res => {
                      if (res.data.errcode === 0) {
                        this.emsinfo.ems_number = res.data.data.ems_number
                      } else {
                        this.createEmsNo('EE', 'CN')
                      }
                    })
                    this.emsinfo.code = params.row.code
                    this.emsinfo.name = params.row.name
                    this.emsinfo.mobile_encryption = params.row.mobile_encryption
                    this.emsinfo.cardno_encryption = params.row.cardno_encryption
                    this.emsinfo.process_name = params.row.process_name
                    this.emsinfo.create_time = params.row.create_time
                  }
                }
              }, '需邮寄'),
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    // window.location.href = 'https://www.kuaidi100.com/chaxun?com=ems' + '&nu=' + params.row.ems_number
                    if (params.row.ems_number != null || params.row.ems_number !== '') {
                      window.open('https://www.kuaidi100.com/chaxun?com=ems' + '&nu=' + params.row.ems_number, '_blank')
                    } else {
                      this.$Notice.error({
                        title: '查询失败',
                        desc: '该订单未绑定EMS单号'
                      })
                    }
                  }
                }
              }, '邮件跟踪')
            )
            return h('div', temp)
          }
        }
      ]
    }
  },
  methods: {
    init () {
      this.searchInfo.loading1 = true
      this.datalistwork = []
      let parasm = {
        'name': this.searchInfo.name,
        'code': this.searchInfo.code,
        'start_time': date2str(this.searchInfo.applytime[0]),
        'end_time': date2str(this.searchInfo.applytime[1]),
        'pageNo': this.searchInfo.currentPageNo,
        'pageSize': this.searchInfo.currentPageSize
      }
      getOrderEMSList(parasm).then(ret => {
        if (ret.data.errcode === 0) {
          this.searchInfo.totalnum = ret.data.data.totalRecord
          let data = []
          ret.data.data.results.forEach(function (temp, index) {
            if (temp.mobile) {
              if (temp.mobile.length === 8 || temp.mobile.length === 7) {
                temp.mobile_encryption = temp.mobile.substring(0, 3) + '****' + temp.mobile.substring(6)
              } else if (temp.mobile.length === 11) {
                temp.mobile_encryption = temp.mobile.substring(0, 3) + '****' + temp.mobile.substring(7)
              } else {
                temp.mobile_encryption = temp.mobile
              }
            }
            if (temp.cardno) {
              temp.cardno_encryption = temp.cardno.substring(0, 6) + '********' + temp.cardno.substring(14)
            }
            if (temp.state === '2') {
              temp.process_name = '办结成功'
            }
            if (temp.state === '3') {
              temp.process_name = '办结失败'
            }
            if (temp.ems_number) {
              temp.ems_state = '已邮寄'
            } else {
              temp.ems_state = '未邮寄'
            }
            data.push(temp)
          })
          this.datalistwork = data
          this.searchInfo.loading1 = false
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    searchDatawork () {
      this.init()
    },
    changePagesize (pageSize) {
      this.searchInfo.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.searchInfo.currentPageNo = pageNo
      this.init()
    },
    createOrderEMS () {
      let param = {
        order_code: this.emsinfo.code,
        ems_number: this.emsinfo.ems_number
      }
      createOrderEMS(param).then(res => {
        console.log(res)
        if (res.data.errcode === 0 || res.data.data === '1') {
          this.$Message.success('ems订单绑定成功')
        } else {
          this.$Notice.error({ title: '', desc: res.data.errmsg })
        }
      })
    },
    createEmsNo (start, end) {
      let tempStr = ''
      for (let i = 0; i < 8; i++) {
        tempStr += Math.floor((Math.random() * 10))
      }
      let x = tempStr.charAt(0) * 8 + tempStr.charAt(1) * 6 + tempStr.charAt(2) * 4 + tempStr.charAt(3) * 2 + tempStr.charAt(4) * 3 + tempStr.charAt(5) * 5 + tempStr.charAt(6) * 9 + tempStr.charAt(7) * 7
      let y = x % 11
      let z = 11 - y
      let n
      if (z === 10) {
        n = 0
      }
      if (z === 11) {
        n = 5
      }
      if (z < 10) {
        n = z
      }
      this.emsinfo.ems_number = start + tempStr + n + end
      console.log(this.emsinfo.ems_number)
    }
  },
  mounted () {
    this.init()
  }
}
</script>
